<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-06 15:16:29
-->
<template>
  <div class="home">
    <!-- 头部 -->
    <Head></Head>
    <!-- /头部 -->
    <!-- 主体 -->
    <div class="content">
    <!-- 左边 -->
      <el-row>
        <el-col :span="3">
          <div class="grid-content bg-purple">
            <!-- 导航栏 -->
            <ul class="menu">
              <li :class="$route.query.name==c.name?'current':''"
              v-for="c in categories"
              @click="toListHandler(c)" 
              :key="c.id">{{c.name}}</li>
            </ul>
            <!-- /导航栏 -->
          </div>
        </el-col>
      <!--/左边结束  -->
      <!-- 中间 -->
        <el-col :span="14">
          <div class="grid-content bg-purple">
          <!-- 轮播图 -->
            <div class="carousel">
              <el-carousel height="300px" indicator-position="none">
                <el-carousel-item v-for="item in carousels" :key="item.id">
                  <img :src="item.url" alt="">
                </el-carousel-item>
              </el-carousel>
            </div>
            <!-- /轮播图结束 -->
            <div class="content_min" v-loading="loading">
            <!-- 文章列表 -->
            <!-- <div class="title">{{category}}</div> -->
            <!-- {{articleData.cover}} -->
              <div class="articles">
                <ul v-if="articleData.total > 0">
                  <li class="article" 
                    @click="toArticleHandler(a)"
                    v-for="a in articleData.list" :key="a.id">
                    <div class="list_one">
                      <div class="left_img">
                        <img :src="a.cover" alt="">
                      </div>
                      <div class="right_text">
                        <!-- {{a.title}}
                        {{a.cover}} -->
                        <!-- 文章标题 -->
                        <div class="title">{{a.title}}</div>
                        <div class="time">
                          <!-- 时间图标 -->
                          <i class="el-icon-alarm-clock"></i>
                          <!-- 发布时间 -->
                          <span>{{a.publishTime | fmtDate}}</span>
                          &nbsp;&nbsp;&nbsp;&nbsp;
                          <!-- 阅读图标和阅读次数 -->
                          <i class="el-icon-view"></i>
                          <span>{{a.readTimes}}</span>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- 如果没有数据执行 -->
                <div v-else style="text-align:center;color:red;padding:2em">
                  暂无数据
                </div>
              </div>
          </div>
            <!-- /文章列表 -->
            <!-- 分页 -->
            <div class="page">
               <el-pagination
                background
                layout="prev, pager, next"
                hide-on-single-page
                @current-change="pageChangeHandler"
                :page-size="articleData.pageSize"
                :total="articleData.total">
              </el-pagination>
            </div>
            <!-- /分页 -->
          </div>
        </el-col>
        <!-- /中间 结束-->
        <!-- 右边 -->
        <el-col :span="7">
          <div class="grid-content bg-purple-light">
            <!-- 右侧登录框 -->
            <Login></Login>
            <!-- 右侧热点新闻 -->
            <Popular></Popular>
          </div>
        </el-col>
      </el-row>
      <!-- /右边 -->
    </div>
    <!-- /主体 -->
    <!-- 底部 -->
    <Foot></Foot>
    <!-- /底部 -->


    <router-link to="article">组成</router-link>


  </div>
</template>
<script>
import { get } from "../utils/request";
import Head from './components/Head.vue';
import Foot from './components/Foot.vue';
import Login from './components/Login';
import Popular from './components/Popular';
export default {
  components:{
    Head,
    Foot,
    Login,
    Popular
  },
  data(){
    return{
      carousels:[],
      loading:false,
      category:{},
      param:{
        page:1,
        pageSize:5
      },
      categories:[],
      articleData:{
        list:[]
      }
    }
  },
  methods:{
    //加载轮播图数据
    loadCarousels(){
      let url = '/index/carousel/findAll'
      get(url).then(resp => {
        this.carousels = resp.data;
      })
    },
    // 加载栏目信息
    loadCategories(){
      let url = '/index/category/findAll'
      get(url).then(resp => {
        this.categories = resp.data;
      })
    },
    // 加载文章信息
    loadArticles(){
      this.loading = true;
      let url = "/index/article/pageQuery"
      this.param.categoryId = this.category.id;
      get(url,this.param).then(resp => {
        this.articleData = resp.data;
      }).finally(()=> {
        this.loading = false;
      })
    },
    toArticleHandler(article){
      this.$router.push({
        path:'/article',
        query:{
          id:article.id,
          name:article.category?article.category.name:''
        }
      })
    },
    pageChangeHandler(page){
      this.param.page = page;
      this.loadArticles();
    },
    // 跳转
    toListHandler(category){
      this.$router.push({
        path:'/home',
        query:category,
      })
      location.reload();
    }
  },
  watch:{
    '$router.query':{
      handler(query){
        this.category = query;
        this.loadArticles();
      },
      deep:true
    }
  },
  //生命周期钩子函数 - 在vue的生命周期各个阶段会执行的代码
  created(){
    this.category = this.$route.query;
    this.loadCarousels();
    this.loadCategories();
    this.loadArticles();
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 80%;
  margin: 0 auto;
  .content_min{
    margin-top: 3em;
  }
  ul.menu{
    // right: 0;
    // position: fixed;
    // top: 0;
    & > li{
      padding: .5em 0;
      cursor: pointer;
      text-align: center;
      font-size: 20px;
    }
    & > li.current,
    & > li:hover{
      background-color: red;
      color: white;
    }
  }
  .articles{
    .article{
      width: 90%;
      padding: .5em .3em;
      margin: 0 auto;
      font-size: 22px;
      //超出的文本显示省略号
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      .left_img{
        float: left;
      }
      .left_img::after{
        display: block;
        content: '';
        clear: both;
      }
      .left_img{
        //小手
        cursor: pointer;
        img{
          width: 110px;
          height: 80px;
          overflow: hidden;
        }
      }
      .right_text{
        margin-left: 7em;
        .title{
          cursor: pointer;
        }
        .time{
          float: right;
          font-size: 14px;
          right: 0;
        }
        .time::after{
          display: block;
          content: '';
          clear: both;
        }
      } 
    }
  }
}
</style>